<template>
  <div>
    <basic-container>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>内容管理</el-breadcrumb-item>
        <el-breadcrumb-item>书籍分类管理</el-breadcrumb-item>
      </el-breadcrumb>
    </basic-container>
    <avue-crud
      :option="option"
      :data="data"
      @tree-load="treeLoad"
      @row-update="rowUpdate"
      @refresh-change="getCategoryList"
    >
      <!-- 描述 -->
      <template slot-scope="scope" slot="name">
        <el-descriptions-item>{{ scope.row.name }}</el-descriptions-item>
        <el-button
          icon="el-icon-s-order"
          type="text"
          size="small"
          style="color: red"
          @click.stop="getMultilingualDetail(scope.row)"
          v-if="
            scope.row.name != undefined &&
            scope.row.name.trim().length != 0 &&
            scope.row.multilingual == 0
          "
        >
          <font>配置未完善</font>
        </el-button>
        <el-button
          icon="el-icon-s-order"
          type="text"
          size="small"
          @click.stop="getMultilingualDetail(scope.row)"
          v-if="
            scope.row.name != undefined &&
            scope.row.name.trim().length != 0 &&
            scope.row.multilingual == 1
          "
        >
          <font>配置多语言文本</font>
        </el-button>
      </template>
    </avue-crud>
    <!-- 弹出框 -->
    <el-dialog
      title="多语言文本配置"
      :visible.sync="multilingualDialogVisible"
      :append-to-body="true"
    >
      <el-form :model="multilingual_data" label-width="120px">
        <el-form-item label="文本说明：">
          <el-descriptions-item>{{
            multilingual_data.txt
          }}</el-descriptions-item>
        </el-form-item>

        <el-form-item label="动态文本：">
          <el-select
            v-model="multilingual_data.dynamic_able"
            placeholder="请选择是否为动态文本"
          >
            <el-option label="否" :value="0"></el-option>
            <el-option label="是" :value="1"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="英语文本：">
          <el-input
            type="textarea"
            v-model="multilingual_data.en_txt"
            placeholder="请输入英语文本"
          ></el-input>
        </el-form-item>

        <el-form-item label="芬兰语文本：">
          <el-input
            type="textarea"
            v-model="multilingual_data.fn_txt"
            placeholder="请输入芬兰语文本"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="multilingualDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateMultilingual()"
          >修 改</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { common } from "@/api/cat/httpRequest";
import { catUrl } from "@/config/env";
import {
  AppBook as baseURL,
  bookCategory,
  uploadFile,
  appConfigDefaultTxt,
} from "@/api/cat/baseUrls";
export default {
  data() {
    return {
      option: {
        addBtn: false,
        delBtn: false,
        lazy: true,
        rowKey: "name",
        column: [
          {
            label: "分类名称",
            prop: "name",
            slot: true,
          },
          {
            label: "ID",
            prop: "category_id",
            addDisplay: false,
            editDisplay: false,
            addDisabled: false,
            editDisabled: false,
            overHidden: true,
          },
          {
            label: "描述",
            prop: "intro",
            type: "textarea",
          },
          {
            type: "upload",
            label: "分类封面",
            prop: "cover_url",
            listType: "picture-img",
            action: `${catUrl}${uploadFile.uploadFile}`,
            propsHttp: {
              url: "source",
            },
          },
        ],
      },
      data: [],
      multilingualDialogVisible: false,
      multilingual_data: {
        txt: "",
        use_area: 1,
        dynamic_able: 0,
        config_complete: 0,
        en_txt: "",
        fn_txt: "",
      },
    };
  },
  mounted() {
    this.getCategoryList();
  },
  methods: {
    getCategoryList() {
      this.data = [
        {
          category_id: -1,
          name: "男频",
          cover_url: "",
          site: 1,
          intro: "",
          hasChildren: true,
        },
        {
          category_id: -2,
          name: "女频",
          cover_url: "",
          site: 2,
          intro: "",
          hasChildren: true,
        },
      ];
    },
    async rowUpdate(row, index, done) {
      let userInfo = this.$store.state.user.userInfo;
      row.editor = userInfo.username;
      await common(bookCategory.update, row, null, "POST");
      done(row);
    },
    async treeLoad(tree, treeNode, resolve) {
      let id = tree.category_id;
      let site = tree.site;
      if (id == -1 || id == -2) {
        id = 0;
      }

      let { data } = await common(
        `${bookCategory.selectBySiteAndParentIdChildren}/` + id + "/" + site
      );
      let categoryList = [];

      for (const category of data) {
        category.multilingual = 1;
        if (category.level == 2) {
          category.hasChildren = false;
        } else {
          category.hasChildren = true;
        }
        categoryList.push(category);
      }
      setTimeout(() => {
        resolve(categoryList);
      }, 500);
    },
    /**获取多语言配置 */
    async getMultilingualDetail(row) {
      let updateTxt = row.name;
      let multilingual_res = await common(
        `${appConfigDefaultTxt.selectAppConfigDefaultTxt}?txt=${updateTxt}&showDetail=true`,
        null,
        null,
        "GET"
      );
      if (
        multilingual_res.data == undefined ||
        multilingual_res.data.id == undefined
      ) {
        this.multilingual_data = {
          txt: updateTxt,
          use_area: 1,
          dynamic_able: 0,
          config_complete: 0,
          en_txt: "",
          fn_txt: "",
          type: "add",
          rowId: row.category_id,
        };
      } else {
        this.multilingual_data = multilingual_res.data;
        this.multilingual_data.type = "edit";
        this.multilingual_data.rowId = row.category_id;
      }
      this.multilingualDialogVisible = true;
    },
    /**修改多语言配置 */
    async updateMultilingual() {
      let userInfo = this.$store.state.user.userInfo;
      let edit_admin_id = userInfo.id;
      let edit_admin_name = userInfo.username;
      let update;
      if (this.multilingual_data.type == "add") {
        update = await common(
          appConfigDefaultTxt.save,
          { ...this.multilingual_data, edit_admin_id, edit_admin_name },
          null,
          "POST"
        );
      } else {
        update = await common(
          appConfigDefaultTxt.update,
          { ...this.multilingual_data, edit_admin_id, edit_admin_name },
          null,
          "POST"
        );
      }
      if (update.code == 1) {
        this.multilingualDialogVisible = false;
      }
    },
  },
};
</script>
<style>
</style>